<template>
  <div>
    <el-container>
      <el-aside width="700px">
        <div id="container" style="width:100%;height:550px"/>
      </el-aside>

      <el-main>
        <!--    添加页-->
        <el-form v-model="coreOrgFrom" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="coreOrgFrom.name" placeholder="请输入名称"/>
          </el-form-item>

          <el-form-item label="简称">
            <el-input v-model="coreOrgFrom.abbreviation" placeholder="请输入简称"/>
          </el-form-item>

          <el-form-item label="部门类别">
            <el-select v-model="coreOrgFrom.orgType" placeholder="请选择">
              <el-option label="分公司" :value="true"/>
              <el-option label="网点" :value="false"/>
            </el-select>
          </el-form-item>

          <el-form-item label="地区">
            <area-cascader type="code" v-model="selected" :level="1" :data="pcaa"></area-cascader>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="coreOrgFrom.address" id="keyword" placeholder="请输入详细地址"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="coreOrgFrom.contractNumber" placeholder="联系电话"/>
          </el-form-item>

          <el-form-item label="状态">
            <el-radio v-model="coreOrgFrom.status" :label="true">启用</el-radio>
            <el-radio v-model="coreOrgFrom.status" :label="false">禁用</el-radio>
          </el-form-item>

          <el-form-item label="描述">
            <el-input type="textarea" v-model="coreOrgFrom.describe" placeholder="请输入描述"/>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-input type="textarea" v-model="coreOrgFrom.businessHours" placeholder="请输入营业时间"/>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addCoreOrg">添加</el-button>
      </el-main>
    </el-container>


  </div>
</template>

<script>
import { pca, pcaa } from 'area-data'
import AMap from 'AMap'
import coreOrg from '@/api/base/coreOrg/index'

export default {
  name: 'add',
  data() {
    return {
      selected: [],
      pca: pca,
      pcaa: pcaa,
      coreOrgFrom: {},
      //高德地图map
      map: null,
      autocomplete: null,
      placeSearch: null,
      autoOptions: null
    }
  }, methods: {
    addCoreOrg() {
      this.coreOrgFrom.provinceId = this.selected[0];
      this.coreOrgFrom.cityId = this.selected[1];
      this.coreOrgFrom.countyId = this.selected[2];
      coreOrg.addCoreOrg(this.coreOrgFrom).then(data =>{
        this.$message({
          type:'success',
          message:'组织增加成功!',
          showClose:true
        })
        this.$router.push({path:'/coreOrg-index'})
      })
    },
    /**
     *显示地图
     * */
    showAmap() {
      this.map = new AMap.Map('container', {
        zoom: 11, // 级别
        resizeEnable: true
      })
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], this.search)
    },
    /**
     * 搜索
     * */
    search() {
      this.autocomplete = new AMap.Autocomplete({
        input: 'keyword'
      })
      this.placeSearch = new AMap.PlaceSearch({
        city: '北京',
        map: this.map
      })
      AMap.event.addListener(this.autocomplete, 'select', this.setting)
    },
    /**
     * 获取标签
     * @param e
     */
    setting(e) {
      // TODO 针对选中的poi实现自己的功能
      this.placeSearch.setCity(e.poi.adcode)
      this.placeSearch.search(e.poi.name)
      /**
       * 获取所有的标记进行添加点击事件
       */
      const markers = this.map.getAllOverlays('marker')
      AMap.event.addListener(this.placeSearch, 'markerClick', this.getAddress)

    },
    /**
     * 获取详细地址
     * @param e
     */
    getAddress(e) {
      this.coreOrgFrom.latitude = e.data.location.lat
      this.coreOrgFrom.longitude = e.data.location.lng
      // e.data.location.lat
      // e.data.location.lng
      this.coreOrgFrom.address = e.data.pname + '' + e.data.cityname + '' + e.data.adname + '' + e.data.address + '' + e.data.name
    }
  },
  mounted() {
    this.showAmap()
  }
}
</script>

<style scoped>

</style>
